<template>
  <div>
    <ul class="list">
      <li v-for="item in reList" :key="item.id">
        <input type="checkbox" class="checkBox" :checked="item.isCheck" @change="changeStatus(item.id)">
        <p>{{item.title}}</p>
        <button @click="delItem(item.id)">删除</button>
      </li>
    </ul>
  </div>
</template>

<script>
import { defineComponent, ref, onMounted, watch } from 'vue'

export default defineComponent({
  name: 'list',
  props: {
    list: {
      type: Array,
      required: true
    },
    checked: {
      type: Boolean,
      required: true
    }
  },
  setup (props, context) {
    const changeStatus = (id) => {
      context.emit('change-status', { id })
    }
    const delItem = (id) => {
      context.emit('del-item', { id })
    }
    const reList = ref([])
    onMounted(() => {
      reList.value = props.list.filter(item => {
        return item.isChecked === props.checked
      })
    })
    watch(props.list, (newVal) => {
      reList.value = props.list.filter(item => {
        return item.isCheck === props.checked
      })
    })

    return {
      changeStatus,
      delItem,
      reList
    }
  }
})
</script>

<style scoped>
  .list {
    list-style: none;
  }
  .list > li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 10px 50px;
    padding: 5px 10px;
    border-radius: 10px;
    background-color: #ffffff;
  }
</style>
